 



	<!-- bootstrap / tab选项卡 start-->
	<!-- 文档地址 https://getbootstrap.net/docs/components/navs/ -->
	<ul class="nav nav-tabs" id="myTab" role="tablist">
	  <li class="nav-item">
	    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
	  </li>
	  <li class="nav-item">
	    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
	  </li>
	  <li class="nav-item">
	    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
	  </li>
	</ul>


	<!-- 内容区域 -->
	<div class="tab-content" id="myTabContent">
		
	  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab" style="height: 100vh;background-color: #666">
	  	第一
	  
	  </div>


	  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab" style="height: 100vh;background-color: #666">
	  	第二

	  </div>


	  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab" style="height: 100vh;background-color: #666">
	  	第三

	  </div>
	</div>
	<!-- bootstrap框架的nav滑动门组件结束 -->

	<script type="text/javascript">
		var navitem=$('.nav-item');
		navitem.click(function(){
			console.log($(this).index());
		});
	</script>
	<!-- bootstrap / tab选项卡 end-->
